<template>
    <el-dialog v-if="dialogVisible" :close-on-click-modal='false' title="达人管理" :visible.sync="dialogVisible" @close="resetForm()" width="800px">
        <div class="flexbox flexcenter">
            <div class="tal_box">
                <div class="tal_head flexbox flexcenter">
                    <el-checkbox v-model="is_coop" @change="selectAll(cooperateList,'coopCheck','is_coop')">合作</el-checkbox>
                </div>
                <div class="tal_input">
                    <el-input prefix-icon="el-icon-search" v-model="coopQuery" clearable style="width:100%" placeholder="请输入达人ID进行搜索"></el-input>
                </div>
                <div class="tal_list">
                    <div class="tal_item flexbox flexcenter" v-for="item in filteredData(cooperateList,coopQuery)" :key="item.aweme_id">
                        <el-checkbox v-model="item.checked" @change="selectCheck(cooperateList,'coopCheck','is_coop')"></el-checkbox>
                        <div class="tal_main flexbox flexcenter">
                            <img :src="item.aweme_avatar" alt="" class="tal_img">
                            <div class="tal_info">
                                <div class="tal_name">{{item.aweme_name}}</div>
                                <!-- <div class="tal_brand">{{item.aweme_avatar}}</div> -->
                                <div class="tal_id">ID:{{item.aweme_id}}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="tal_center flex flexbox flexcenter flexcolumn">
                <svg @click="toChange(cooperateList,'coopCheck','selfList')" width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <circle cx="24" cy="24" r="23.5" fill="white" stroke="#EBEBEB" />
                    <path d="M25.7143 28.2856L30 23.9999L25.7143 19.7142" stroke="#B4B7BD" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                    <path d="M30 24L18.8571 24" stroke="#B4B7BD" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                </svg>
                <svg @click="toChange(selfList,'selfCheck','cooperateList')" class="toLeft" width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <circle cx="24" cy="24" r="23.5" fill="white" stroke="#EBEBEB" />
                    <path d="M25.7143 28.2856L30 23.9999L25.7143 19.7142" stroke="#B4B7BD" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                    <path d="M30 24L18.8571 24" stroke="#B4B7BD" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                </svg>
            </div>
            <div class="tal_box">
                <div class="tal_head flexbox flexcenter">
                    <el-checkbox v-model="is_self" @change="selectAll(selfList,'selfCheck','is_self')">自营</el-checkbox>
                </div>
                <div class="tal_input">
                    <el-input prefix-icon="el-icon-search" v-model="selfQuery" clearable style="width:100%" placeholder="请输入达人ID进行搜索"></el-input>
                </div>
                <div class="tal_list">
                    <div class="tal_item flexbox flexcenter" v-for="item in filteredData(selfList,selfQuery)" :key="item.aweme_id">
                        <el-checkbox v-model="item.checked" @change="selectCheck(selfList,'selfCheck','is_self')"></el-checkbox>
                        <div class="tal_main flexbox flexcenter">
                            <img :src="item.aweme_avatar" alt="" class="tal_img">
                            <div class="tal_info">
                                <div class="tal_name">{{item.aweme_name}}</div>
                                <!-- <div class="tal_brand">{{item.aweme_avatar}}</div> -->
                                <div class="tal_id">ID:{{item.aweme_id}}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button size="small" @click="resetForm()" class="el-button-width">取 消</el-button>
            <el-button size="small" type="primary" @click="submitForm()" :loading="loading" :disabled="loading" class="el-button-width">保 存</el-button>
        </span>
    </el-dialog>
</template>

<script>
export default {
    name: "",
    data() {
        return {
            loading: false,
            dialogVisible: false,
            shop_id: null,
            is_coop: false,
            is_self: false,
            cooperateList: [],
            selfList: [],
            coopCheck: [],
            selfCheck: [],
            coopQuery: "",
            selfQuery: "",
        };
    },
    created() {
        this.getUserList();
    },
    methods: {
        //获取账户列表列表
        async getUserList() {
            const { data: res } = await this.$http.post(
                "/projectfinance/Revenue/awemeList",
                {
                    shop_id: this.shop_id,
                }
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                res.data.cooperate.forEach((item) => {
                    item.checked = false;
                });
                res.data.self.forEach((item) => {
                    item.checked = false;
                });
                this.cooperateList = res.data.cooperate;
                this.selfList = res.data.self;
            }
        },

        selectCheck(list,has,all) {
            let arr = list.filter((item) => {
                return item.checked;
            });
            this[has] = arr;
            this[all] = list.every((item) => item.checked);
        },

        selectAll(list,has,all) {
            let arr = [];
            list.map((item) => {
                item.checked = this[all];
            });
            if (this[all]) {
                arr = list;
            } else {
                arr = [];
            }
            this[has] = arr;
        },

        toChange(list,has,list2) {
            if (this[has].length > 0) {
                let hasCheck = JSON.parse(JSON.stringify(this[has]));
                hasCheck.map((item) => {
                    item.checked = false;
                });
                for (let i in list) {
                    for (let a in hasCheck) {
                        if (
                            list[i].aweme_id ==
                            hasCheck[a].aweme_id
                        ) {
                            list.splice(i, 1);
                        }
                    }
                }
                this[list2] = this[list2].concat(hasCheck);
                this[has] = []
                this.is_coop = false;
                this.is_self = false;
            }
        },

        // 筛选
        filteredData(list, query) {
            var list = list,
                query = query;

            if (!query) {
                return list;
            }
            query = query.trim();

            list = list.filter(function (item) {
                if (
                    item.aweme_name.indexOf(query) !== -1 ||
                    item.aweme_id == query
                ) {
                    return item;
                }
            });
            return list;
        },

        // 提交添加
        async submitForm() {
            this.loading = true;
            let queryInfo = {
                shop_id: this.shop_id,
                self: this.selfList.map((item) => {
                    return item.aweme_id;
                }),
                cooperate: this.cooperateList.map((item) => {
                    return item.aweme_id;
                }),
            };
            const { data: res } = await this.$http.post(
                "/projectfinance/Revenue/aweme_edit",
                queryInfo
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                this.loading = false;
                return;
            } else {
                this.$message({
                    message: "保存成功",
                    type: "success",
                });
                this.loading = false;
                this.resetForm();
            }
        },

        // 关闭重置表单
        resetForm() {
            this.dialogVisible = false;
            this.is_coop = false;
            this.is_self = false;
            this.coopQuery = "";
            this.selfQuery = "";
        },
    },
    components: {},
};
</script>


<style scoped>
.tal_box {
    width: 336px;
    box-sizing: border-box;
    border: 1px solid #dcdee2;
    border-radius: 4px;
}
.tal_head {
    height: 47px;
    padding: 0 20px;
    background: rgba(165, 177, 209, 0.08);
}
.tal_input {
    margin: 12px 20px;
}
.tal_list {
    height: 332px;
    overflow-y: auto;
    padding: 0 20px;
}
.tal_item {
    padding: 12px 0;
    border-bottom: 1px solid #dcdee2;
}
/* .tal_item:last-child{
    border-bottom: 0;
} */
.tal_main {
    margin-left: 15px;
}
.tal_img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
}
.tal_info {
    margin-left: 12px;
}
.tal_name {
    font-size: 14px;
    line-height: 20px;
    color: #17233d;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}
.tal_brand {
    font-size: 12px;
    line-height: 16px;
    margin-top: 2px;
    color: #616c85;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}
.tal_id {
    font-size: 12px;
    line-height: 16px;
    margin-top: 2px;
    color: #b4b7bd;
}
.tal_center svg {
    margin: 10px 0;
    cursor: pointer;
}
.toLeft {
    transform: rotate(-180deg);
}
</style>
